<style lang="scss">
    #ctr{
        padding:0 10px;
        background:#fff;
        .ctr-content{
            margin-top:20px;
            .m-table{
                margin:10px 0;
            }
        }
    }
</style>
<template>
    <div id="ctr">
        <div class="ctr-content content-mask" v-loading="loading">
            <p class="m-title"><i></i><span>题目和背景信息</span></p>
            <div class="m-table">
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">登记号</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.ctrId}}</el-col>
                    <el-col :span="4" class="m-table-title m-table-td">适应症</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.indication}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">药物名称</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.medicineName}}</el-col>
                    <el-col :span="4" class="m-table-title m-table-td">试验分期</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.periodization}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">药物类型</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.medicineType}}</el-col>
                    <el-col :span="4" class="m-table-title m-table-td">试验分类(CDE)</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.cde}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">试验通俗题目</el-col>
                    <el-col :span="20" class="m-table-content m-table-td">{{ctrObject.popularTitle}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">试验科学题目</el-col>
                    <el-col :span="20" class="m-table-content m-table-td">{{ctrObject.scienceTitle}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">试验状态</el-col>
                    <el-col :span="20" class="m-table-content m-table-td">{{ctrObject.status}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">试验方案编号</el-col>
                    <el-col :span="20" class="m-table-content m-table-td">{{ctrObject.number}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">首次公示信息日期 </el-col>
                    <el-col :span="20" class="m-table-content m-table-td">{{ctrObject.time | formatDate}}</el-col>
                </el-row>
            </div>
        </div>
        <div class="ctr-content">
            <p class="m-title"><i></i><span>申办者信息</span></p>
            <div class="m-table">
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">申办者名称</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.sponsor}}</el-col>
                    <el-col :span="4" class="m-table-title m-table-td">联系人姓名</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.contacts}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">联系人电话</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.contactsTel}}</el-col>
                    <el-col :span="4" class="m-table-title m-table-td">联系人Email</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.contactsEmail}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">联系人邮政地址</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.contactsAdd}}</el-col>
                    <el-col :span="4" class="m-table-title m-table-td">联系人邮编</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.contactsCode}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">试验项目经费来源</el-col>
                    <el-col :span="20" class="m-table-content m-table-td">{{ctrObject.source}}</el-col>
                </el-row>
            </div>
        </div>
        <div class="ctr-content">
            <p class="m-title"><i></i><span>试验目的</span></p>
            <div class="m-table">
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">试验目的</el-col>
                    <el-col :span="20" class="m-table-content m-table-td">{{ctrObject.objective}}</el-col>
                </el-row>
            </div>
        </div>
        <div class="ctr-content">
            <p class="m-title"><i></i><span>主要研究者信息</span></p>
            <div class="m-table">
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">姓名</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.researcher}}</el-col>
                    <el-col :span="4" class="m-table-title m-table-td">职称</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.title}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">电话</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.researcherTel}}</el-col>
                    <el-col :span="4" class="m-table-title m-table-td">Email</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.researcherEmail}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">邮政地址</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.researcherCodeAdd}}</el-col>
                    <el-col :span="4" class="m-table-title m-table-td">邮编</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.researcherCode}}</el-col>
                </el-row>
                <el-row class="m-table-tr" type="flex">
                    <el-col :span="4" class="m-table-title m-table-td">单位地址</el-col>
                    <el-col :span="8" class="m-table-content m-table-td">{{ctrObject.researcherAdd}}</el-col>
                    <el-col :span="4" class="m-table-title m-table-td"></el-col>
                    <el-col :span="8" class="m-table-content m-table-td"></el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import {medicine} from 'api/index.js';
export default {
    name: 'ctr',//中国临床试验详情
    data(){
        return{
            loading:false,
            ctrId:"",
            ctrObject:{}
        }
    },
    props:["id"],
    filters:{
        formatDate(date) {
            var youWant;
            if (date && date != "") {
                var d = new Date(date);
                var month, dates;
                if (d.getMonth() + 1 < 10) {
                month = "-0" + (d.getMonth() + 1);
                } else {
                month = "-" + (d.getMonth() + 1);
                }
                if (d.getDate() < 10) {
                dates = "-0" + d.getDate();
                } else {
                dates = "-" + d.getDate();
                }
                youWant = d.getFullYear() + month + dates;
            } else {
                youWant = null;
            }
            return youWant;
        }
    },
    methods:{
         //获取世界临床试验详情
        getNctDetails(){
            let obj = {
                id : this.ctrId
            };
            this.loading = true;
            medicine.getChclinsById(obj).then((data)=>{
                if(data.status == 200){
                   if(data.data){
                       this.ctrObject = data.data;
                   }
                }else{
                    this.$message.error(data.msg);
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
                this.$message.error("药品列表失败");
            });
        }
    },
    mounted() {
        this.ctrId = this.id ? this.id : '';
        if(this.ctrId){
            this.getNctDetails();
        }
    },
    watch:{
        "id":function(val){
            this.ctrId = val;
            if(this.ctrId){
                this.getNctDetails();
            }
        }
    }
}
</script>